<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-27 11:12:28
 * @LastEditors: william
 * @LastEditTime: 2025-03-17 19:04:00
-->
<template>
  <el-select
    v-model="idList"
    multiple
    collapse-tags
    collapse-tags-tooltip
    :max-collapse-tags="3"
    :placeholder="
      g_rules.zhAndEnShowMsg(g_t('public.pleaseSelect'), $t('userCenter.role'))
    "
    :="$attrs"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
const idList = defineModel({
  type: Array,
  default: () => []
})
const options = defineModel('list', {
  type: Array,
  default: () => []
})

onMounted(() => {
  getOptions()
})

const getOptions = () => {
  g_api.userCenter.apiRoleDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      options.value = data
    }
  })
}
</script>

<style scoped lang="scss"></style>
